<template>
  <div class="home">
    <ul class="nav">
      <li @click="flag = 0">未读</li>
      <li @click="flag = 1">已读</li>
      <li @click="flag = 2">回收站</li>
    </ul>
    <ul v-if="flag == 0">
      <li
        v-for="(item, index) in $store.state.list"
        :key="index"
        v-show="item.status == 0"
      >
        {{ item.title }}
        <button @click="change1(index)">标为已读</button>
      </li>
    </ul>
    <ul v-if="flag == 1">
      <li
        v-for="(item, index) in $store.state.list"
        :key="index"
        v-show="item.status == 1"
      >
        {{ item.title }}
        <button>标为未读</button>
        <button>回收站</button>
      </li>
    </ul>
    <ul v-if="flag == 2">
      <li
        v-for="(item, index) in $store.state.list"
        :key="index"
        v-show="item.status == 2"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      flag: 0,
    };
  },
  created() {
    this.$axios.get("list.json").then((res) => {
      this.$store.commit("setlist", res.data.list);
    });
  },
  methods: {
    change1(index){
      this.$store.commit("change1",index)
    }
  },
};
</script>
